import styled from "@emotion/styled"
import { ButtonGroup } from "./components/ButtonGroup"
import { useModalSlideUp } from "@/features/useModal"
import { useNavigate } from "react-router-dom"
import { ImageComponent } from "@/components/base/Image"

const Root = styled.div`
    padding: 12rem;
    width: 100%;
    height: 312rem;
`

const ModelRoot = styled.div`
    width: 100%;
    height: 288rem;
    padding: 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
`

const Bg = styled(ImageComponent("pages/AccountPage/models/bg.webp"))`
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
`
const HintImage = styled(ImageComponent("pages/AccountPage/models/hint.webp"))`
    width: 80rem;
    height: 80rem;
    margin: 0 auto;
    > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
`
const Title = styled.div`
    margin-top: 20rem;
    height: 24rem;
    line-height: 24rem;
    color: #131416;
    font-famaily: "Gilroy";
    font-weight: 500;
    font-size: 18rem;
`
const Tips = styled.div`
    margin-top: 12rem;
    line-height: 20rem;
    color: #40444f;
    font-famaily: "Gilroy";
    font-weight: 400;
    font-size: 14rem;
    text-align: center;
`

const EmailHint = () => {
    const navigate = useNavigate()
    const { close: closeModal } = useModalSlideUp("account-page")
    const handleConfim = () => {
        console.log("跳转设置")
        navigate("/s-account/form/email")
    }
    return (
        <Root>
            <ModelRoot>
                <Bg />
                <HintImage />
                <Title>Hint</Title>
                <Tips>
                    Your Filbet account does not have a email address set up. Please set your email
                    address first.
                </Tips>
                <ButtonGroup
                    onCancel={closeModal}
                    onConfirm={handleConfim}
                    cancelText="Do it later"
                    confirmText="Go to setting"
                ></ButtonGroup>
            </ModelRoot>
        </Root>
    )
}
export default EmailHint
